<template>
    <el-dialog v-model="updateDialog" title="修改学生信息" width="800">
        <el-form :inline="true" class="demo-form-inline" ref="formRef" :rules="formRules" :model="formData">
            <el-row>
                <el-col :span="12">
                    <el-form-item label="姓名" label-width="80" :required="true" prop="name">
                        <el-input autocomplete="off" v-model="formData.name" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="昵称" label-width="80" prop="nickname">
                        <el-input autocomplete="off" v-model="formData.nickname" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="头像" prop="avatar-s" label-width="80">
                        <!--<el-input autocomplete="off" v-model="formData.photoUrl" />-->
                        <el-upload style="border: 1px solid grey;width: 40px;height: 40px;" class="avatar-uploader"
                            :action="axios.defaults.baseURL + '/file/upload'" :show-file-list="false"
                            :on-success="handleAvatarSuccess">
                            <img :src="formData.avatar" class="avatar" v-if="formData.avatar" alt="" />
                            <el-icon v-else class="avatar-uploader-icon">
                                <Plus />
                            </el-icon>
                        </el-upload>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="性别" label-width="80" :required="true" prop="gender">
                        <el-radio-group autocomplete="off" v-model="formData.gender" placeholder="请选择你的性别">
                            <el-radio value="男" label="男"></el-radio>
                            <el-radio value="女" label="女"></el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="手机号码" label-width="80" :required="true" prop="telephone">
                        <el-input autocomplete="off" v-model="formData.telephone" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="年龄" label-width="80" :required="true" prop="age">
                        <el-input autocomplete="off" v-model="formData.age" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="班级ID" label-width="80" :required="true" style="width: 248px">
                        <!-- <el-select autocomplete="off" v-model="formData.classId" placeholder="选择班级">
                            <el-option v-for="classList in classList" :label="classList.className" :value="classList.id"
                                :key="classList.className" />
                        </el-select> -->
                        <el-select autocomplete="off" v-model="formData.classId" placeholder="选择班级">
                            <el-option :label="className" :value="formData.classId"
                                :key="className" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :sm="12" :xs="24">
                  <el-form-item label="学历" label-width="80" prop="education">
                    <el-select v-model="formData.education" style="width: 168px;">
                      <el-option label="大专" value="大专" />
                      <el-option label="本科" value="本科" />
                      <el-option label="研究生" value="研究生" />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="身份证号" label-width="80" prop="idCard">
                        <el-input autocomplete="off" v-model="formData.idCard" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="出生日期" label-width="80" prop="birthday">
                        <div class="block">
                            <el-date-picker v-model="formData.birthday" type="date" placeholder="请选择" :size="size"
                                format="YYYY/MM/DD" value-format="YYYY-MM-DD" style="width: 168px;"/>
                        </div>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="籍贯" label-width="80" prop="nativePlace">
                        <el-input autocomplete="off" v-model="formData.nativePlace" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="政治面貌" label-width="80" prop="politicalOutlook">
                        <el-input autocomplete="off" v-model="formData.politicalOutlook" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="家庭住址" label-width="80" prop="address">
                        <el-input autocomplete="off" v-model="formData.address" />
                    </el-form-item>
                </el-col>

            </el-row>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="updateDialog = false">关闭</el-button>
                <el-button @click="resetForm(formRef)">重置</el-button>
                <el-button @click="update()" type="primary">修改</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup>
import { defineEmits, defineModel } from "@vue/runtime-core";
import { reactive, ref } from "vue";
import axios from '@/axios/index.js'
import { ElMessage } from "element-plus";
import { Plus } from "@element-plus/icons-vue";

let updateDialog = defineModel('updateDialog')
const emit = defineEmits(['loadStudentData'])
let rowData = defineProps(['rowData'])
const formRef = ref()
let className = ref()

let formData = reactive({})

function demo() {
        className.value = rowData.rowData.className
        formData.id = rowData.rowData.id,
        formData.nickname = rowData.rowData.nickname,
        formData.gender = rowData.rowData.gender,
        formData.age = rowData.rowData.age,
        formData.telephone = rowData.rowData.telephone,
        formData.classId = rowData.rowData.classId,
        formData.name = rowData.rowData.name,
        formData.statusGraduation = rowData.rowData.statusGraduation,
        formData.avatar = rowData.rowData.avatar,
        formData.education = rowData.rowData.education,
        formData.idCard = rowData.rowData.idCard,
        formData.birthday = rowData.rowData.birthday,
        formData.nativePlace = rowData.rowData.nativePlace,
        formData.politicalOutlook = rowData.rowData.politicalOutlook,
        formData.address = rowData.rowData.address
}

demo()


//表单校验
const formRules = reactive({
    name: [{ required: true, min: '2', pattern: '^[\\u4e00-\\u9fa5]{2,10}$', message: '姓名格式不正确', trigger: 'blur' }],
    gender: [{ required: true, message: '性别不能为空', trigger: 'blur' }],
    telephone: [{ required: true, pattern: '^1\\d{10}$', message: '手机号码格式不正确', trigger: 'blur' }],
    age: [{ required: true, message: '年龄不能为空', trigger: 'blur' }],
    dateOfBirth: [{ required: true, message: '出生日期不能为空', trigger: 'blur' }],
    classId: [{ required: true, message: '不能为空', trigger: 'blur' }],
    jobName: [{ required: true, message: '不能为空', trigger: 'blur' }],
    idCard: [{ required: true, pattern: '(^\\d{15}$)|(^\\d{18}$)|(^\\d{17}(\\d|X|x)$)', message: '身份证号格式不正确', trigger: 'blur' }],
    salary: [{ required: true, message: '薪资应为正数', trigger: 'blur' }]
})

//保存修改
function update() {
    console.log(formData)
    axios.post('/student/updateStudent', formData).then(resp => {
        ElMessage({
            message: resp.data.message,
            type: resp.data.code == 200 ? 'success' : "error",
            duration: 1500,
            onClose: function () {
                updateDialog.value = false
                emit('loadStudentData')
                resetForm()
            }
        })
    })
}

//上传头像
function handleAvatarSuccess(response) {
    formData.avatar = response.data
}

// let classList = ref([])

//获取班级列表
// axios.get('/api/v1/class/getClassList').then(resp => {
//     classList.value = resp.data.data.data
//     classList.value.forEach((item) => {
//         item.id = item.id + ""
//     })
// })

//重置表单校验
const resetForm = (formEl) => {
    demo()
    if (!formEl) return
    formEl.resetFields()
}
</script>

<style scoped>
.avatar-avatar-s {
    padding: 26px;
    align-items: center;
}

.demo-form-inline {
    margin-left: 30px;
}

.demo-form-inline el-input {
    --el-input-width: 220px;
}

.demo-form-inline el-radio-group {
    --el-input-width: 220px;
}

.demo-form-inline el-date-picker {
    --el-input-width: 220px;
}

.avatar-uploader el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
}

.avatar-uploader el-upload:hover {
    border-color: var(--el-color-primary);
}

el-icon.avatar-uploader-icon {
    font-size: 20px;
    color: #8c939d;
    width: 40px;
    height: 40px;
    text-align: center;
}

.avatar-uploader .avatar {
    width: 40px;
    height: 40px;
    display: block;
}
</style>